<template>
    <Layout>
        <Form ref="form1" :model="form1" :label-width="120">
            <div v-if="!switchFlag">
                <Row class="query-form" style="padding-top: 15px">
                    <Col span="8">
                        <FormItem label='企业名称：'>
                            <Input v-model="form1.orgName"></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label='风险等级：'>
                            <Select  multiple v-model="form1.riskLevels">
                                <Option  value="I">I</Option>
                                <Option  value="Ⅱ">Ⅱ</Option>
                                <Option  value="Ⅲ">Ⅲ</Option>
                                <Option  value="Ⅳ">Ⅳ</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                        <Button @click="reset" class="ivu-btn-reset">重置</Button>
                        <Button class="ivu-btn-query" icon="md-search" @click="query()">查询</Button>
                    </Col>
                </Row>
            </div>
            <div v-else>
                <Row class="query-form" style="padding-top: 15px">
                    <Col span="8">
                        <FormItem label='企业名称：'>
                            <Input v-model="form1.orgName"></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label='风险等级：'>
                            <Select  multiple v-model="form1.riskLevels">
                                <Option  value="I">I</Option>
                                <Option  value="Ⅱ">Ⅱ</Option>
                                <Option  value="Ⅲ">Ⅲ</Option>
                                <Option  value="Ⅳ">Ⅳ</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label='二级集团：'>
                            <Select v-model="form1.twoLevelOrgId" filterable>
                                <Option v-for="item in twoLevelOrgs" :value="item.orgId" :key="item.orgId">{{ item.orgName }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row class="query-form" style="padding-top: 15px">
                    <Col span="24">
                        <div style="float: right;">
                          <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                          <Button @click="reset" class="ivu-btn-reset">重置</Button>
                          <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                          <!--                            <Button @click="switchQuery(false)" style="margin-left: 10px" class="ivu-btn-switch2" type="text" >收起<Icon type="ios-arrow-up" /></Button>-->
                        </div>
                    </Col>
                </Row>
            </div>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight" :loading="loading" size="small" class="table" no-data-text="没有查询到相关数据!"
               highlight-row stripe border :columns="columns1" width="100%" :data="dataTable">
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24">
                <Page :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
                      style="float: right" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                      show-total show-sizer show-elevator/>
            </Col>
        </Row>

        <Modal closable=false :mask-closable="false" :transfer=false v-model="model1" :width=1000 :title="add?'风险综合评价分析新增':'风险综合评价分析修改'"
               @on-cancel="onCancel">
            <Form ref='InputData' :model="InputData" :rules="ruleCustom" label-position="top">
                <Row style="line-height: 25px;">
                    <Col span='10' offset="1">
                        <FormItem label='企业名称：' prop="corporateName">
                            <cascaderDom ref="riskUnitadd" @setOrgInfo="setRiskUnit1" @setOrgname="setRiskUnitName1"
                                         :currentOrgId="InputData.corporateName" style="margin-top: 4px"
                                         :currentOrgName="InputData.orgName"
                                         :orgTree="true"></cascaderDom>
                        </FormItem>
                    </Col>
                    <Col span='10' offset="1">
                        <FormItem label='企业环境风险源数量等级（X）：' prop="numGrade">
                            <Select v-model="InputData.numGrade">
                                <Option v-for="item in q1List" :value="item.id" :label="item.id">
                                    <span> {{ item.id }}</span>
                                    <span style="float:right;color:#ccc"> {{ item.xName }}</span>
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row style="line-height: 25px;">
                    <Col span='10' offset="1">
                        <FormItem label='历史（近五年）发生违法事件影响（T1）：' prop="t1">
                            <Select v-model="InputData.t1">
                                <Option v-for="item in q1List" :value="item.id" :label="item.id">
                                    <span> {{ item.id }}</span>
                                    <span style="float:right;color:#ccc"> {{ item.t1Name }}</span>
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span='10' offset="1">
                        <FormItem label='现场管理水平（T2）：' prop="t2">
                            <Select v-model="InputData.t2">
                                <Option v-for="item in q1List" :value="item.id" :label="item.id">
                                    <span> {{ item.id }}</span>
                                    <span style="float:right;color:#ccc"> {{ item.t2Name }}</span>
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span='10' offset="1">
                        <FormItem label='重点任务完成情况（T3）：' prop="t3">
                            <Select v-model="InputData.t3">
                                <Option v-for="item in q1List" :value="item.id" :label="item.id">
                                    <span> {{ item.id }}</span>
                                    <span style="float:right;color:#ccc"> {{ item.t3Name }}</span>
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span='10' offset="1">
                        <FormItem label='应急承受能力（T4）：' prop="t4">
                            <Select v-model="InputData.t4">
                                <Option v-for="item in q1List" :value="item.id" :label="item.id">
                                    <span> {{ item.id }}</span>
                                    <span style="float:right;color:#ccc"> {{ item.t4Name }}</span>
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span='10' offset="1">
                        <FormItem label='区域和管控等级（T5）：' prop="t5">
                            <Select v-model="InputData.t5">
                                <Option v-for="item in q1List" :value="item.id" :label="item.id">
                                    <span> {{ item.id }}</span>
                                    <span style="float:right;color:#ccc"> {{ item.t5Name }}</span>
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span='10' offset="1">
                        <FormItem label='风险值：' prop="z">
                            <!--{{z}}-->
                            <Input readonly v-model="z" />
                        </FormItem>
                    </Col>
                </Row>
                <Row style="line-height: 25px;margin-top: 10px">
                    <Col span='10' offset="1">
                        <FormItem label='风险等级：' prop="riskLevels">
                            <span v-if="InputData.rikColor=='红'" style="color: red">{{InputData.riskLevel}}</span>
                            <span v-else-if="InputData.rikColor=='橙'"
                                  style="color: orange">{{InputData.riskLevel}}</span>
                            <span v-else-if="InputData.rikColor=='黄'"
                                  style="color: #FDD835">{{InputData.riskLevel}}</span>
                            <span v-else-if="InputData.rikColor=='蓝'" style="color: blue">{{InputData.riskLevel}}</span>
                            <span v-else style="color: white">{{InputData.riskLevel}}</span>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <div slot="footer">
                <Button class='ivu-btn-save' :loading="buttonLoading||InputData._disabled"
                        @click="submit('InputData')">确定
                </Button>
                <Button class='ivu-btn-cancel' @click="onCancel">取消</Button>
            </div>
        </Modal>

        <Modal :transfer=false v-model="model3" class="modal-view-detail" :width=1000 title="风险综合评价分析">
            <Form :model="InputData" class="modal-view-detail" :label-width="200">
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span='22' offset="1">
                        <FormItem label='企业名称：'>
                            {{InputData.orgName}}
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span='10' offset="1">
                        <FormItem label='企业环境风险源数量等级（X）：'>
                            {{InputData.numGrade}}
                        </FormItem>
                    </Col>
                    <Col span='10' offset="1">
                        <FormItem label='历史（近五年）发生违法事件影响（T1）：'>
                            {{InputData.t1}}
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span='10' offset="1">
                        <FormItem label='现场管理水平（T2）：'>
                            {{InputData.t2}}
                        </FormItem>
                    </Col>
                    <Col span='10' offset="1">
                        <FormItem label='重点任务完成情况（T3）：'>
                            {{InputData.t3}}
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span='10' offset="1">
                        <FormItem label='应急承受能力（T4）：'>
                            {{InputData.t4}}
                        </FormItem>
                    </Col>
                    <Col span='10' offset="1">
                        <FormItem label='区域和管控等级（T5）：'>
                            {{InputData.t5}}
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span='10' offset="1">
                        <FormItem label='风险值：' prop="z">
                            {{InputData.z}}
                        </FormItem>
                    </Col>
                    <Col span='10' offset="1">
                        <FormItem label='风险等级：'>
                            <span v-if="InputData.rikColor=='红'" style="color: red">{{InputData.riskLevel}}</span>
                            <span v-else-if="InputData.rikColor=='橙'"
                                  style="color: orange">{{InputData.riskLevel}}</span>
                            <span v-else-if="InputData.rikColor=='黄'"
                                  style="color: #FDD835">{{InputData.riskLevel}}</span>
                            <span v-else-if="InputData.rikColor=='蓝'" style="color: blue">{{InputData.riskLevel}}</span>
                            <span v-else style="color: white">{{InputData.riskLevel}}</span>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <div slot="footer">
                <Button class='ivu-btn-save' @click="model3=false">关闭</Button>
            </div>
        </Modal>

    </Layout>
</template>

<script>
import {Api} from '../../../api/index.js'
import {sessionStorage} from '../../../common/cacheUtils.js';
import cascaderDom from '../../../components/cascader-dom.vue';

export default {
  components: {cascaderDom},
  name: "riskEvaluationAnalysisRiskPreset",//环保风险预置
  data() {
    return {
      tableHeight: '',
      loading: false,
      rikRankList: ["重大", "较大", "一般", "低"],
      rikRanks: [],
      twoLevelOrgs: [],
      form1: {
                    orgId: '',
                },
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                },
                dataTable: [],
                q1List: [
                    {
                        id: 1,
                        t1Name: '过去从未发生',
                        t2Name: '满分',
                        t3Name: '全部完成',
                        t4Name: '承受能力很强',
                        t5Name: '非重点排污单位',
                        xName:'蓝色50以下'
                    },
                    {
                        id: 2,
                        t1Name: '整改',
                        t2Name: '一级',
                        t3Name: '集团下达任务存在未完成项',
                        t4Name: '承受力强',
                        t5Name: '重点排污单位',
                        xName:'蓝色50以上（含50个）'
                    },
                    {
                        id: 3,
                        t1Name: '约谈',
                        t2Name: '二级',
                        t3Name: '政府下达任务存在未完成项',
                        t4Name: '承受力一般',
                        t5Name: '长三角、重点排污单位',
                        xName:'黄色10个以下'
                    },
                    {
                        id: 4,
                        t1Name: '通报、曝光',
                        t2Name: '三级',
                        t3Name: '都有未完成项',
                        t4Name: '承受力弱',
                        t5Name: '汾渭平原、重点排污单位',
                        xName:'橙色3个以下或黄色10个以上（含10个）'
                    },
                    {
                        id: 5,
                        t1Name: '罚款',
                        t2Name: '未达标型',
                        t3Name: '一项都未完成',
                        t4Name: '承受力很弱',
                        t5Name: '京津冀周边2+26、重点排污单位',
                        xName:'红色1个以上（含1个）或橙色3个以上（含3个）'
                    }
                ],
                ruleCustom: {
                    corporateName: [{
                        validator: (rule, value, callback) => {
                            if (value == null || value == '' || value == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    numGrade: [{
                        validator: (rule, value, callback) => {
                            if (value == null || value == '' || value == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    persion: [{
                        validator: (rule, value, callback) => {
                            if (value == null || value == '' || value == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    riskLevel: [{
                        validator: (rule, value, callback) => {
                            if (value == null || value == '' || value == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    prevention: [{
                        validator: (rule, value, callback) => {
                            if (value == null || value == '' || value == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],

                    t1: [{
                        validator: (rule, value, callback) => {
                            if (value == null || value == '' || value == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    t2: [{
                        validator: (rule, value, callback) => {
                            if (value == null || value == '' || value == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    t3: [{
                        validator: (rule, value, callback) => {
                            if (value == null || value == '' || value == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    t4: [{
                        validator: (rule, value, callback) => {
                            if (value == null || value == '' || value == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    t5: [{
                        validator: (rule, value, callback) => {
                            if (value == null || value == '' || value == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    z: [{
                        validator: (rule, value, callback) => {
                            if (this.z == null || this.z == '' || this.z == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                },
                columns1: [
                    {
                        title: "序号",
                        width: 80,
                        align: "center",
                        fixed: 'left',
                        render: (h, params) => {
                            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
                        }
                    },
                    {
                        minWidth: 150,
                        title: '单位名称',
                        align: 'center',
                        key: 'orgName',
                    },
                    {
                        minWidth: 150,
                        title: '企业环境风险源数量等级（X）',
                        align: 'center',
                        key: 'numGrade',
                    },
                    {
                        minWidth: 150,
                        title: '风险等级',
                        align: 'center',
                        key: 'riskLevel',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                    },
                                    on: {
                                        click: () => {
                                            this.InputData = params.row;
                                            this.model3 = true;
                                        }
                                    }
                                }, '详情'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                    },
                                    on: {
                                        click: () => {
                                            this.InputData = params.row;
                                            this.model1 = true;
                                            this.add = false;
                                            console.log(this.InputData);
                                        }
                                    }
                                }, '修改'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: 'red',
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteData(params.row);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                switchFlag:false,
                add: false,
                model1: false,
                model3: false,
                InputData: {},
                buttonLoading: false,
            }
        },
        computed: {
            z: function () {
                let z=null
                if (this.InputData.t1 > 0 && this.InputData.t2 > 0 && this.InputData.t3 > 0&& this.InputData.t4 > 0 && this.InputData.t5 > 0) {
                    z = Math.ceil(this.NumberAdd(this.InputData.t1, this.NumberAdd(this.InputData.t2, this.NumberAdd(this.InputData.t3, this.NumberAdd(this.InputData.t4, this.InputData.t5)))) / 5)
                }
                this.InputData.z =z;
                let riskLevel,rikColor;
                let y = z;
                let p = this.InputData.numGrade;
                if (p == 0 || y == 0) {  //s5 :y r5:p
                    riskLevel = ' '
                } else if ((p > 2 && y == 5) || (p == 5 && y == 4)) {
                    riskLevel = 'Ⅰ'
                } else if ((y  == 2 && p == 5) || ((p == 5 || p == 4) && y == 3) || (y == 4 && (p == 4 || p == 3)) || (p == 2 && y == 5)) {
                    riskLevel= 'Ⅱ'
                } else if ((y == 1 && p > 3) || ((p == 3 || p == 4) && y == 2) || ((p == 2 || p == 3) && y == 3) || ((p == 2 || p== 1)&&y==4) || (p == 1 && y == 5)) {
                    riskLevel = 'Ⅲ'
                } else {
                    riskLevel = 'Ⅳ'
                }
                rikColor = riskLevel == 'Ⅰ' ? '红' : riskLevel == 'Ⅱ' ? '橙' : riskLevel == 'Ⅲ' ? '黄' : riskLevel == 'Ⅳ' ? '蓝' : ' '
                this.InputData.rikColor=rikColor
                this.InputData.riskLevel=riskLevel
                return z;
            },
        },
        mounted() {
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            this.query();
            this.queryTwoOrgInfo();
        },
        watch: {
            "model1": function (qw, er) {
                if (qw && this.model1) {
                    setTimeout(() => {
                        this.$refs.riskUnitadd.setCurrentOrg();
                        // this.$refs.childUser1.setCurrentOrg();
                    }, 100);
                } else {
                    this.$refs.riskUnitadd.resetCurrentOrg();
                    // this.$refs.childUser1.resetCurrentOrg();
                }
            },
        },
        methods: {
            switchQuery(flag){
                this.switchFlag = flag;
                if(this.switchFlag) {
                    this.tableHeight = this.tableHeight - 74;
                }else{
                    this.tableHeight = this.tableHeight + 74;
                }
            },
            queryTwoOrgInfo() {
                if(sessionStorage('userId').getObject('userId').companyId != '18000000'){
                    this.twoLevelOrgs.push({orgId:sessionStorage('userId').getObject('userId').twoLevelOrgId ,
                    orgName:sessionStorage('userId').getObject('userId').twoLevelOrgName});
                }else {
                    this.$http.get(Api.quqeryTwoOrgInfo).then(res => {
                        this.twoLevelOrgs = res.data.data
                    }).catch(e => {
                    })
                }
            },
            setRiskUnit(data) {
                this.form1.orgId = data[data.length - 1];
            },
            setRiskUnitName(data) {
                this.form1.orgName = data;
            },
            setRiskUnit1(data) {
                this.InputData.corporateName = data[data.length - 1];
            },
            setRiskUnitName1(data) {
                this.InputData.orgName = data;
            },

            setUserName(data) {
                this.InputData.persion = data;
            },
            setUserId(data) {
                this.InputData.persionId = data[data.length - 1];
            },

            onCancel() {
                this.InputData = {}
                this.model1 = false
                this.query()
            },
            submit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.buttonLoading = true
                        let url = ''
                        if (this.add) {
                            url = Api.riskEvaluationAnalysisAdd
                            this.$http.post(url, this.InputData).then((res) => {
                                this.$Message.success('成功');
                                this.query()
                                this.buttonLoading = false
                            }).catch(e => {
                                this.$Message.error('请求失败');
                            })
                            this.model1 = false
                        } else {
                            url = Api.riskEvaluationAnalysisUpdate;
                            this.$http.post(url, this.InputData).then((res) => {
                                this.$Message.success('成功');
                                this.buttonLoading = false
                                this.query()
                            }).catch(e => {
                                this.$Message.error('请求失败');
                            })
                            this.model1 = false
                        }
                    } else {
                        this.$Message.error('填报数据校验失败');
                    }
                })

            },

            deleteData(row) {
                let istrue = confirm("请确认是否删除该条数据？");
                if (istrue) {
                    let url = Api.riskEvaluationAnalysisDelete;
                    this.$http.delete(url,{params:{id:row.id}}).then((res) => {
                        this.$Message.success('成功');
                        this.query()
                    }).catch(e => {
                        this.$Message.error("数据获取失败")
                    })
                }
            },
            addInfo() {
                this.add = true;
                this.InputData = {};
                this.model1 = true;

            },
            query() {
                this.loading = true;
                let data = {
                    startPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize,
                    orgName: sessionStorage('userId').getObject('userId').companyName
                };
                data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));
                let url = Api.riskEvaluationAnalysisList
                this.$http.get(url, {params: data}).then((res) => {
                    this.dataTable = res.data.data.data;
                    this.pagedata.total = res.data.data.totalSize;
                    this.loading = false;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            reset() {
              this.form1 = {}
              // this.$refs.riskUnit.resetCurrentOrg();
              // this.$refs.riskUnit1.resetCurrentOrg();
              this.pagedata.currentPage = 1
              this.query()
            },
            pageChange(pageNum) {
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            pageSizeChange(pageSize) {
                this.pagedata.pageSize = pageSize;
                this.query();
            },
        }
    }
</script>

<style scoped>
    @import '../../../index.css';
</style>
